<!-- eslint-disable prettier/prettier -->
<!-- eslint-disable vue/no-multiple-template-root -->
<!-- 数据统计 => 数据分析 -->
<template>
  <div class="hello" ref="redContainer">
    <div class="box1">
        <div class="Zx"><ZheXiantu :xData="barXData" :yData="barYData" /></div>
        
        <div class="Xh"><XunHuanfk /></div>
    </div>
    <div class="box2">
        
        <div class="Px"><PaiXu /></div>
        <div class="Xs"><XiaoshouZhanbi :xData="barXData" :yData="barYData"/></div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import ZheXiantu from "./图标组件.vue";
import PaiXu from "./PaiMing.vue";
import XiaoshouZhanbi from "./XiaoshouZhanbi.vue";
import XunHuanfk from "./XunHuanfk.vue";

export default {
  name: "DataAnalysis",
  components: {
    ZheXiantu,
    PaiXu,
    XiaoshouZhanbi,
    XunHuanfk,
  },
  data() {
    return {
      barXData: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "Augus",
        "September",
        "October",
        "November",
        "December",
      ],
      barYData: [290, 316, 302, 671, 491, 522, 659, 701, 956, 961, 988, 1211],
    };
  },

  methods: {},
};
</script>

<style scoped lang="scss">
.box1 {
  background-color: rgb(241, 234, 234);
  width: 1900px;
  height: 460px;
  display: flex;
  margin-top: 20px;
}
.Zx {
  width: 1300px;
  height: 530px;
  margin-right: 20px;
  margin-left: 25px;
  margin-top: 10px;
}
.Xh {
  width: 530px;
  height: 530px;
  margin-top: 10px;
}
.box2 {
  width: 1900px;
  height: 600px;
  display: flex;
}
.Px {
  width: 1000px;
  height: 489px;
  margin-top: 100px;
  margin-left: 25px;
}
.Xs {
  width: 905px;
  height: 489px;
  margin-left: 20px;
  margin-right: 25px;
  margin-top: 100px;
}
</style>
